<template>
  <div id="apps"></div>
</template>
<script setup>
import echarts from "echarts";
import { onMounted } from "vue";
const props = defineProps({
  listData: {
    required: true,
    type: Array,
    default: [],
  },
});
const { listData } = toRefs(props);
onMounted(() => {
  watch(
    () => props.listData,
    () => {
      const houseArr = ref([]);
      const houseRenovation = ref([]);
      const roomProperty = ref([]);
      const lifelineSystem = ref([]);
      const enterprisesCause = ref([]);
      const disasterCost = ref([]);
      const arr = ref([]);
      arr.value = listData.value.map(
        (item) => item.district + "\n" + item.magnitude + "级地震"
      );
      houseArr.value = listData.value.map((item) => item.houseLoss);
      houseRenovation.value = listData.value.map(
        (item) => item.renovationLoss
      );
      roomProperty.value = listData.value.map(
        (item) => item.roomLoss
      );
      lifelineSystem.value = listData.value.map(
        (item) => item.lifelineLoss
      );
      enterprisesCause.value = listData.value.map(
        (item) => item.enterprisesLoss
      );
      disasterCost.value = listData.value.map(
        (item) => item.disasterLoss
      );
      let myChart = echarts.init(document.getElementById("apps"));
    
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          left:80,
          data: [
            {
              name: "房屋",
              icon: "rect",
            },
            {
              name: "房屋装修",
              icon: "rect",
            },

            {
              name: "室内外财产",
              icon: "rect",
            },
            {
              name: "生命线系统",
              icon: "rect",
            },
            {
              name: "企事业",
              icon: "rect",
            },
            {
              name: "救灾投入费用",
              icon: "rect",
            },
          ],
          formatter: ["{a|{name}}"].join("\n"),
          textStyle: {
            color: "#fff",
            rich: {
              a: {
                width: 90,
                color: "#fff",
                fontSize: 12,
                textAlign: "center",
                lineHeight: 20,
              },
              b: {
                width: 10,
              },
            },
          },
        },
        grid: {
          left: "3%",
          right: "9%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: arr.value,
          textStyle: {
            color: "#FFFFFF",
          },
          // x轴样式
          axisLine: {
            lineStyle: {
              color: "#30374A",
              show: false,
            },
          },
          name:'类别',
          nameTextStyle:{
            color:'#fff'
          },
          //x轴文字的配置
          axisLabel: {
            fontSize: 12,
            textStyle: {
              color: " #fff",
            },
          },
        },
        yAxis: {
          type: "value",
          textStyle: {
            color: "#FFFFFF",
          },
          name:'占比/%',
          nameTextStyle:{
            color:'#fff'
          },
          // y轴样式
          axisLine: {
            show: false,
            lineStyle: {
              color: "transparent",
            },
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(255,255,255,0.5)",
            },
          },
          // 背景线条
          splitLine: {
            lineStyle: {
              color: "rgba(71,90,219,0.5)",
              type: "dashed",
            },
          },
          max:100,
        },
        series: [
          {
            name: "房屋",
            type: "line",
            stack: "Total",
            itemStyle: {
              normal: {
                color: "#46FFFF",
              },
            },
            data: houseArr.value,
          },
          {
            name: "房屋装修",
            type: "line",
            // stack: "Total",
            itemStyle: {
              normal: {
                color: "#FFB35B",
              },
            },
            data: houseRenovation.value,
          },
          {
            name: "室内外财产",
            type: "line",
            // stack: "Total",
            itemStyle: {
              normal: {
                color: "#ED5385",
              },
            },
            data: roomProperty.value,
          },
          {
            name: "生命线系统",
            type: "line",
            // stack: "Total",
            itemStyle: {
              normal: {
                color: "#A6D839",
              },
            },
            data: lifelineSystem.value,
          },
          {
            name: "企事业",
            type: "line",
            // stack: "Total",
            itemStyle: {
              normal: {
                color: "#418DFD",
              },
            },
            data: enterprisesCause.value,
          },
          {
            name: "救灾投入费用",
            type: "line",
            // stack: "Total",
            itemStyle: {
              normal: {
                color: "#E32EFF",
              },
            },
            data: disasterCost.value,
          },
        ],
      });
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },{ deep: true, immediate: true }
  );
});
</script>
<style lang="scss" scoped>
#apps {
  width: 450px;
  height: 240px;
  margin: 0px 0 0 0;
  color: #fff;
}
</style>
